<template>
  <div style="height: 100%;">
    <scroll-view :scroll-top="scrollTop" @scrolltoupper="scrolltoupper" @scroll="handleScroll" :scroll-y="true" :style="{ height: height, width: width,'overflow-y': 'auto','-webkit-overflow-scrolling': 'touch' }">
        <slot name="header"></slot>
		<view class="history-prompt" v-if="showHistoryPrompt">
			<view class="history-prompt__line"></view>
			<text class="history-prompt__text">下拉查看历史对话</text>
			<view class="history-prompt__line"></view>
		</view>
        <view class="byt-bubbleList-box" v-if="items && items.length > 0">
            <basic-loadmore :status="status" v-if="status === 'loading'" />
            <view v-for="(item, index) in items" :key="item.key">
                <slot name="content" :type="item.type" :index="index"></slot>
                <Bubble
                    :colorIcon="colorIcon"
                    v-if="item.role != 'slot'"
                    :typeWhiteList="typeWhiteList"
                    :contentType="item.contentType"
                    :contentAppendData="item.contentAppendData"
                    :placement="placementAgent(item)"
                    :config="configAgent(item)"
                    :createTime="item.createTime"
                    :content="item.content"
                    :deepSeekContent="item.deepSeekContent"
                    :deepSeekStatus="item.deepSeekStatus"
                    :deepSeekTime="item.deepSeekTime"
                    @response="(e) => setResponse(e, index)"
                    :senderHeight="senderHeight"
                    :chatId="item.chatId"
                    :conversationId="item.conversationId"
                >
                    <template #footer>
                        <view style="display: flex; align-items: center">
                            <view v-if="item.contentType != 'FILE' && item.contentType != 'greeting' && !loading" class="byt-bubbleList-box-copy" @click="onCopy({ content: item.content })">
                                <image
                                    style="width: 28rpx; height: 28rpx"
                                    :src="colorIcon.copyIcon ? colorIcon.copyIcon : '/static/copy.svg'"
                                    mode=""
                                ></image>
                                <text
                                    class="byt-bubbleList-box-copy__text"
                                    :style="{ color: colorIcon.textMainColor ? colorIcon.textMainColor : '#1890ff', 'margin-left': '8rpx' }"
                                >
                                    复制
                                </text>
                            </view>

                            <view class="byt-bubbleList-box-copy" v-if="verifyPermission('action', item.contentType)">
                                <image
                                    style="width: 28rpx; height: 28rpx"
                                    :src="colorIcon.actionIcon ? colorIcon.actionIcon : '/static/action.svg'"
                                    mode=""
                                ></image>
                                <text
                                    class="byt-bubbleList-box-copy__text is-action"
                                    :style="{ color: colorIcon.textMainColor ? colorIcon.textMainColor : '#1890ff', 'margin-left': '8rpx' }"
                                >
                                    做活动
                                </text>
                            </view>
<!--                            <view v-if="item.contentType != 'greeting' && !loading" class="byt-bubbleList-box-copy" @click="setResponse({ type: 'resize' }, index)">-->
<!--                                <image-->
<!--                                    style="width: 28rpx; height: 28rpx"-->
<!--                                    :src="colorIcon.refreshIcon ? colorIcon.refreshIcon : '/static/refresh.svg'"-->
<!--                                    mode=""-->
<!--                                ></image>-->
<!--                                <text-->
<!--                                    class="byt-bubbleList-box-copy__text"-->
<!--                                    :style="{ color: colorIcon.textMainColor ? colorIcon.textMainColor : '#1890ff', 'margin-left': '8rpx' }"-->
<!--                                >-->
<!--                                    重新提问-->
<!--                                </text>-->
<!--                            </view>-->

                          <view v-if="item.contentType != 'greeting' && !loading" class="byt-bubbleList-box-copy" @click="share(item)">
                            <image
                                style="width: 28rpx; height: 28rpx"
                                :src="colorIcon.shareIcon ? colorIcon.shareIcon : '/static/share.svg'"
                                mode=""
                            ></image>
                            <text
                                class="byt-bubbleList-box-copy__text"
                                :style="{ color: colorIcon.textMainColor ? colorIcon.textMainColor : '#1890ff', 'margin-left': '8rpx' }"
                            >
                              分享
                            </text>
                          </view>


                        </view>
                    </template>
                </Bubble>
            </view>

<!--            <view class="list-bottom" style="height: 50px"></view>-->
        </view>
        <slot name="footer"></slot>

        <!-- 自动到最底部的开关 待开发 -->
        <view v-if="false" class="bubbleList-box-auto-bottom">
            <image :style="{ transform: 'rotate(90deg)' }" src="/static/right.svg" mode=""></image>
        </view>
    </scroll-view>
  </div>
</template>

<script>
// 消息对话框
import Bubble from '../Bubble/Bubble.vue';
// import { BasicLoadmore } from '../../basic';
// 加载更多
import BasicLoadmore from '../../basic/basic-loadmore/basic-loadmore.vue';
import {isJsonString, showToast} from '../../../utils/index.js';
import {address} from "@/config/conf";
export default {
    name: 'BubbleList',
    components: {
        Bubble,
        BasicLoadmore
    },
    emits: [ 'scrolltoupper','handleScroll'],
    props: {
        // 主题色和图标
        colorIcon: {
            type: Object,
            default: () => {
                return {
                    // 主题色
                    mainColor: '#448ef7',
                    // 辅助色
                    assistColor: '#a8ecff',
                    // 字体主色
                    textMainColor: '#1890ff',
                    // 复制按钮图标
                    copyIcon: '/static/copy.svg',
                    // 重新提问图标
                    refreshIcon: '/static/refresh.svg',
                    //分享图标
                    shareIcon: '/static/share.svg',
                    // 做活动按钮图标
                    actionIcon: '/static/action.svg'
                };
            }
        },
        // 支持的消息类型
        typeWhiteList: {
            type: Array,
            default: () => {
                return ['text', 'activity', 'coupon', 'goods', 'chart', 'tables', 'action', 'image'];
            }
        },
        // 列表数据规则
        roles: {
            type: Object,
            default: () => {
                return {
                    // AI助手
                    ai: {
                        // 有名称就显示，没有就不显示
                        name: 'AI助手',
                        // 头像
                        avatar: 'https://img.yummall.cn/baiyetong/byt-uni-ui/role_icon_1.svg',
                        // 位置
                        placement: 'start'
                    },
                    // 用户
                    user: {
                        name: '用户名称1',
                        avatar: 'https://img.yummall.cn/baiyetong/byt-uni-ui/default_avatar.png',
                        placement: 'end'
                    }
                };
            }
        },
        // 列表数据
        items: {
            type: Array,
            default: () => {
                return [
                    {
                        key: '121412424',
                        createTime: '2033-09-09 12:12:12',
                        role: 'ai',
                        content: '我是AI角色',
                        // 内容类型：'text', 'activity', 'coupon', 'goods', 'chart', 'tables', 'action', 'image'
                        contentType: 'text',
                        deepSeekContent: ''
                    },
                    {
                        key: '121412424',
                        createTime: '2033-09-09 12:12:12',
                        role: 'user',
                        content: '我是用户角色',
                        // 内容类型：'text', 'activity', 'coupon', 'goods', 'chart', 'tables', 'action', 'image'
                        contentType: 'text',
                        deepSeekContent: ''
                    }
                ];
            }
        },
        // 高度
        height: {
            type: String,
            default: '100%'
        },
        // 宽度
        width: {
            type: String,
            default: '100%'
        },
        // 滚动条位置
        scrollTop: {
            type: Number,
            default: 0
        },
        // 加载状态
        status: {
            type: String,
            default: 'loadmore'
        },
        //消息回复中...
        loading: {
            type: Boolean,
            default: false
        },
      senderHeight: {
        type: Number,
        default: 0
      }
    },
    data() {
        return {
			showHistoryPrompt: true
		};
    },
    async mounted() {},
    computed: {},
    methods: {
        // 做活动工具显示逻辑
        verifyPermission(type, contentType) {
            let permission = this.typeWhiteList.includes(type);
            let tempContentType = contentType == type;
            if (type == 'chart') {
                tempContentType = contentType.startsWith('chart');
            }
            return tempContentType && permission;
        },
        // 复制
        onCopy(item) {
            console.log('复制', item.content);
            const message = item.content;
            uni.setClipboardData({
                data: message,
                success: function () {
                    console.log('复制成功');
                }
            });
        },
        placementAgent(item) {
            return this.roles[item.role] ? this.roles[item.role].placement : 'start';
        },
        configAgent(item) {
            return this.roles[item.role] || {};
        },
        // 消息气泡方法抛出
        setResponse(e, index) {
            this.$emit('response', e, index);
        },
        // 滚动到顶部
        scrolltoupper() {
          console.log('触发滚动到顶部');
			     this.showHistoryPrompt = false;
            this.$emit('scrolltoupper');
        },
		handleScroll(e){
			this.$emit('handleScroll',e.detail)
		},
      share(item) {
        console.log('item')
        console.log(item)
        if (item.contentAppendData.type==='FILE') {

          // 分享到微信插件
          const FileShare = uni.requireNativePlugin('life-FileShare');

// 文件路径
          let url = address + '/agentapi/common/oss/download?resource=/' +item.contentAppendData.fileName;
// 文件名称
          let name = item.contentAppendData.originalFilename;
//下面使用这个下载方式，亲测，如果用uniapp自身的ios中文乱码，下面可以重命名不会乱码，分享就是FileShare调用
          const dtask = plus.downloader.createDownload(url, {filename: "_doc/uniapp_save/" + name}, function (d, status) {
            // 下载完成
            if (status === 200) {
              FileShare.render({
                type: 'SYSTEM',//QQ为QQ，微信为WX，系统默认是SYSTEM，不填写默认SYSTEM
                filePath: plus.io.convertLocalFileSystemURL(d.filename),
              }, result => {
                console.log(result, 'result')
              }, errer => {
                console.log(errer, 'errer')
              });
            } else {
              console.log("Download failed: " + status);
            }
          });
          dtask.start();

        }else {
          uni.shareWithSystem({
            summary: item.content,
            href: '',
            success(){
              // 分享完成，请注意此时不一定是成功分享
            },
            fail(){
              // 分享失败
            }
          })


        }

      }
    }
};
</script>

<style lang="scss" scoped>
.bubbleList-box-auto-bottom {
    position: fixed;
    bottom: 15vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 66rpx;
    height: 66rpx;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
    z-index: 999999;
    box-shadow: 0px 8rpx 10px 0px rgba(0, 0, 0, 0.3);
    margin: 20px auto;

    image {
        width: 36rpx;
        height: 36rpx;
    }
}
@include b(bubbleList-box) {
    max-width: 1800rpx;
    margin: 0 auto;

    @include eb(copy) {
        display: flex;
        align-items: center;
        margin-right: 30rpx;

        @include e(text) {
            margin-left: 10rpx;
            color: #1aa0ff;
            font-size: 24rpx;
            white-space: nowrap;

            &.is-action {
                color: #8848cb;
            }
        }
    }
}
.history-prompt {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 48rpx 0;
		padding: 20px 32rpx;

		&__line {
			width: 64rpx;
			height: 1px;
			background: rgba(0, 0, 0, 0.1);
		}

		&__text {
			padding: 0 20rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.4);
			white-space: nowrap;
		}
	}
</style>
